<template>
  <div class="cus-row">
    <el-select v-model="province" placeholder="省" class="cus-select" :disabled="disabled" filterable clearable @change="changedProvince">
      <el-option v-for="(item, index) in provinceList" :key="index" :value="item.province.name" :label="item.province.name" />
    </el-select>
    <el-select v-model="city" placeholder="市" class="cus-select" :disabled="disabled" filterable clearable @change="changedCity">
      <el-option v-for="(item, index) in cityList" :key="index" :value="item.city.name" :label="item.city.name" />
    </el-select>
    <el-select v-show="isHide" v-model="village" placeholder="区/县" class="cus-select" filterable clearable @change="changedVillage">
      <el-option v-for="(item, index) in villageList" :key="index" :value="item.name" :label="item.name" />
    </el-select>
  </div>
</template>

<script>
import { getCityList } from '@/api/auth'

export default {
  name: 'CitySelect',
  props: {
    value: {
      type: Object,
      required: true
    },
    isHide: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      province: null,
      city: null,
      village: null,
      provinceList: [],
      cityList: [],
      villageList: []
    }
  },
  created() {
    this.getAddressList()
  },
  methods: {
    resetFields() {
      this.province = null
      this.city = null
      this.village = null

      this.value.province = null
      this.value.city = null
      this.value.village = null

      this.$emit('change', this.value)
    },
    getAddressList() {
      const vm = this
      getCityList().then(res => {
        vm.provinceList = res.data.data
      }).catch(res => {
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
        vm.provinceList = []
      })
    },
    changedProvince(province) {
      const vm = this
      const result = vm.$XEUtils.find(vm.provinceList, item => item.province.name === province)

      vm.city = null
      vm.village = null
      vm.cityList = []
      vm.villageList = []
      vm.value.city = null
      vm.value.village = null

      if (result != null && result.cityRegion) {
        vm.cityList = result.cityRegion
      }

      if (result && result.province) {
        vm.value.province = {
          id: result.province.id,
          name: result.province.name,
          code: result.province.code
        }
      } else {
        vm.value.province = null
      }
      console.log(vm.cityList)
      vm.$emit('change', vm.value)
    },
    changedCity(city) {
      const vm = this
      const result = vm.$XEUtils.find(vm.cityList, item => item.city.name === city)

      vm.village = null
      vm.villageList = []
      vm.value.village = null

      if (result != null && result.village) {
        vm.villageList = result.village
      }

      if (result && result.city) {
        vm.value.city = {
          id: result.city.id,
          name: result.city.name,
          code: result.city.code
        }
      } else {
        vm.value.city = null
      }

      vm.$emit('change', vm.value)
      vm.city = city
      console.log(vm.city)
    },
    changedVillage(village) {
      const vm = this
      const result = vm.$XEUtils.find(vm.villageList, item => item.name === village)

      if (result) {
        vm.value.village = {
          id: result.id,
          name: result.name,
          code: result.code
        }
      } else {
        vm.value.village = null
      }

      vm.$emit('change', vm.value)
      vm.village = village
    },
    setAddress(province, city, village) {
      const vm = this
      vm.province = province
      vm.city = city
      vm.village = village
      getCityList().then(res => {
        vm.provinceList = res.data.data
        vm.changedProvince(province)
        vm.changedCity(city)
        vm.changedVillage(village)
      }).catch(res => {
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
        vm.provinceList = []
      })
    },
    testone() {
      console.log(1)
    }
  }
}
</script>

<style scoped>
  .cus-row {
    margin-left: 10px;
    display: inline-flex;
  }
  .cus-select {
    max-width: 126px;
    margin-right: 10px;
  }
</style>
